<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>zhangsan</title>
</head>
<body> 
    <main></main>
    <footer>
        <input type="text">
    </footer>
    
<script>

    const input = document.querySelector('input');
    input.focus();
    const btn = document.querySelector('button');
    let url = 'ws://localhost:8080/ws/zhangsan'
    const ws = new WebSocket(url);

    function getMessage() {
        let val = input.value;
        input.value = '';
        return val;
    }
    ws.onopen = function() {
        if(this.readyState === 1) {
            input.addEventListener('keydown', (e) => {
                if(e.code === 'Enter') {
                    this.send(getMessage());
                }
            })
        } else {
            alert('连接服务器失败')
        }
    }


    ws.onclose = () => {
        alert('zhangsan ws close');
    }


    ws.onmessage = function(e) {
        console.log(e.data);
    }


    let url1 = 'ws://localhost:8080/ws/zhangsan1';
    const ws1 = new WebSocket(url1);
    ws1.onopen = function() { }
    ws1.onmessage = function(e) {
        console.log('李四：' + e.data); 
    }

    ws1.onclose = () => {
        alert('zhangsan ws1 Cose');
    }
    



</script>
</body>
</html>